import Sprite from '../base/sprite'
import {databus} from '../databus'

const screenWidth = window.innerWidth
const screenHeight = window.innerHeight



/**
 * 游戏背景类
 * 提供update和render函数实现无限滚动的背景功能
 */
export default class Frame {
  constructor(ctx) {
    this.render(ctx)
  }

  update() {
    if(databus.mode=='startMovie'){
      const sprite = databus.startMovie
      sprite.update(databus.frame,'normal',0)
   
    }else if(databus.mode=='start'){
      const arrowSprite = databus.svSprites.find(sprite => sprite.spriteName === 'arrow');
      if (arrowSprite) {
        arrowSprite.update(databus.frame, 'normal', 0);
      }
    }else if(databus.mode == 'world'){
      const worldMap = databus.worldMap;
      if (worldMap) {
        worldMap.update(databus.frame, '', 0);
      }
      
    }
   
  }

  /**
   * 背景图重绘函数
   * 绘制两张图片，两张图片大小和屏幕一致
   * 第一张漏出高度为top部分，其余的隐藏在屏幕上面
   * 第二张补全除了top高度之外的部分，其余的隐藏在屏幕下面
   */
  render(ctx) {
    ctx.fillStyle = '#b4b4b4';
    ctx.fillRect(0, 0, screenWidth, screenHeight);
    
    if(databus.mode=='startMovie'){
      // 绘制一个边框  
      ctx.strokeStyle = 'black'; // 你可以设置你想要的任何颜色  
      ctx.lineWidth = 2; // 设置边框宽度，可以根据需要调整  
      ctx.strokeRect(4*16*devicePixelRatio, 1*16*devicePixelRatio, 9*16*devicePixelRatio, 6*16*devicePixelRatio);
      ctx.strokeRect(4*16*devicePixelRatio-5, 1*16*devicePixelRatio-5, 9*16*devicePixelRatio+10, 6*16*devicePixelRatio+10);
      ctx.strokeRect(4*16*devicePixelRatio-10, 1*16*devicePixelRatio-10, 9*16*devicePixelRatio+20, 6*16*devicePixelRatio+20);
      const sprite = databus.startMovie
      sprite.drawToCanvas(ctx)     
    }else if(databus.mode=='start'){
      // 绘制一个边框  
      ctx.strokeStyle = 'black'; // 你可以设置你想要的任何颜色  
      ctx.lineWidth = 2; // 设置边框宽度，可以根据需要调整  
      ctx.strokeRect(4*16*devicePixelRatio, 1*16*devicePixelRatio, 9*16*devicePixelRatio, 6*16*devicePixelRatio);
      ctx.strokeRect(4*16*devicePixelRatio-5, 1*16*devicePixelRatio-5, 9*16*devicePixelRatio+10, 6*16*devicePixelRatio+10);
      ctx.strokeRect(4*16*devicePixelRatio-10, 1*16*devicePixelRatio-10, 9*16*devicePixelRatio+20, 6*16*devicePixelRatio+20);
      for (let data of databus.svSprites) {
        const sprite = data
        sprite.drawToCanvas(ctx)
      }
      for (let data of databus.controllSprites) {
        const sprite = data
        sprite.drawToCanvas(ctx)
      }
      
    }else if(databus.mode == 'world'){
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, screenWidth, screenHeight);
      const worldMap = databus.worldMap;
      if (worldMap) {
        worldMap.drawToCanvas(ctx);
      }
      // console.log(databus.movies)
      for (let data of databus.npcs) {
        const sprite = data[0]
        sprite.drawToCanvas(ctx)
        
      }
      ctx.fillStyle = '#b4b4b4';
      ctx.fillRect(0, 0, screenWidth, 1*16*devicePixelRatio);
      ctx.fillRect(0, 7*16*devicePixelRatio, screenWidth, 13*16*devicePixelRatio);
      // 左边
      ctx.fillRect(0, 0, 4*16*devicePixelRatio, screenHeight);
      // 右边
      ctx.fillRect(13*16*devicePixelRatio, 0, screenWidth, screenHeight);
      // 绘制一个边框  
      ctx.strokeStyle = 'black'; // 你可以设置你想要的任何颜色  
      ctx.lineWidth = 2; // 设置边框宽度，可以根据需要调整  
      ctx.strokeRect(4*16*devicePixelRatio, 1*16*devicePixelRatio, 9*16*devicePixelRatio, 6*16*devicePixelRatio);
      ctx.strokeRect(4*16*devicePixelRatio-5, 1*16*devicePixelRatio-5, 9*16*devicePixelRatio+10, 6*16*devicePixelRatio+10);
      ctx.strokeRect(4*16*devicePixelRatio-10, 1*16*devicePixelRatio-10, 9*16*devicePixelRatio+20, 6*16*devicePixelRatio+20);
      
      const hero = databus.hero;
      if (hero) {
        hero.drawToCanvas(ctx);
      }
      
      for (let data of databus.controllSprites) {
        const sprite = data
        sprite.drawToCanvas(ctx)
      }
      // console.log(databus.movies)
      for (let data of databus.movies) {
        const sprite = data
        sprite.drawToCanvas(ctx)
        
      }
      
      // 显示消息
      const msgBox = databus.msgBox;
      
      if (msgBox&&msgBox.length>0) {
        let mapMsg = databus.msgBox.find(msg => msg.msgType === 'mapMsg');
        const sayMessages = databus.msgBox.filter(msg => msg.msgType === 'sayMsg');
        // 进入地图时显示所在地图名
        if(mapMsg){
          ctx.fillStyle = 'white';
          ctx.fillRect(screenWidth/2.5, screenHeight/2, screenWidth/4, screenHeight/8);
          // 绘制一个边框  
          ctx.strokeStyle = 'black'; // 你可以设置你想要的任何颜色  
          ctx.lineWidth = 2; // 设置边框宽度，可以根据需要调整  
          ctx.strokeRect(screenWidth/2.5, screenHeight/2, screenWidth/4, screenHeight/8);

          // 设置字体样式  
          ctx.font = '30px Arial'; // 可以根据需要调整字体大小和字体  
            
          // 设置文字颜色  
          ctx.fillStyle = 'black';  
            
          // 绘制文字  
          ctx.fillText( mapMsg.content,  screenWidth/2.5+20, screenHeight/1.7); // 第一个参数是文字内容，第二个参数是x坐标，第三个参数是y坐标  
        }
        if(sayMessages.length>0){
          
          let sayMsg=sayMessages[0]
          
          ctx.fillStyle = 'white';
          ctx.fillRect(4*16*devicePixelRatio,5*16*devicePixelRatio,  9*16*devicePixelRatio, 2*16*devicePixelRatio);
          // 绘制一个边框  
          ctx.strokeStyle = 'black'; // 你可以设置你想要的任何颜色  
          ctx.lineWidth = 2; // 设置边框宽度，可以根据需要调整  
          ctx.strokeRect(4*16*devicePixelRatio,5*16*devicePixelRatio,  9*16*devicePixelRatio, 2*16*devicePixelRatio);
          
          if(sayMsg.hero==='liu_qing_feng'){
            const sayHead = new Sprite('images/resource/anim/hero/'+sayMsg.hero+'/head.png',0,0,0,0,50,50,4*16*devicePixelRatio,5.3*16*devicePixelRatio,'sayHead')
            sayHead.drawToCanvas(ctx)
          }
          if (sayMsg.content.length <= 7) {
            // 设置字体样式  
            ctx.font = '30px Arial'; // 可以根据需要调整字体大小和字体
            // 设置文字颜色  
            ctx.fillStyle = 'black';
            // 绘制文字  
            ctx.fillText(sayMsg.content, 6 * 16 * devicePixelRatio, 6 * 16 * devicePixelRatio); // 第一个参数是文字内容，第二个参数是x坐标，第三个参数是y坐标 
          } else {
            // 设置字体样式  
            ctx.font = '15px Arial'; // 可以根据需要调整字体大小和字体
            // 设置文字颜色  
            ctx.fillStyle = 'black';
            // 绘制文字  

            ctx.fillText(sayMsg.content.slice(0, 14), 6 * 16 * devicePixelRatio, 5.8 * 16 * devicePixelRatio); // 第一个参数是文字内容，第二个参数是x坐标，第三个参数是y坐标 
            ctx.fillText(sayMsg.content.slice(14,28), 6 * 16 * devicePixelRatio, 6.3 * 16 * devicePixelRatio); // 第一个参数是文字内容，第二个参数是x坐标，第三个参数是y坐标 
            ctx.fillText(sayMsg.content.slice(28), 6 * 16 * devicePixelRatio, 6.8 * 16 * devicePixelRatio); // 第一个参数是文字内容，第二个参数是x坐标，第三个参数是y坐标 
          }
          
           
        }
       
        
      }
    }

  }
}
